// Widget configuration.

form.dashboard-widget-clock {
	.fields-group {
		&.fields-group-date,
		&.fields-group-time,
		&.fields-group-tzone {
			display: grid;
			grid-template-columns: repeat(2, minmax(80px, max-content) 1fr);
			align-items: center;
			column-gap: 10px;
			row-gap: 5px;
		}

		&.fields-group-time {
			.field-format {
				grid-column: 4 / -1;
			}
		}

		&.fields-group-tzone {
			.form-field {
				&.field-tzone-timezone,
				&.field-tzone-format {
					grid-column: 2 / -1;
				}
			}
		}
	}
}

// Widget view.

div.dashboard-widget-clock {
	.clock-digital {
		$line-height: 1.14;

		box-sizing: border-box;
		height: 100%;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.clock-date,
		.clock-time,
		.clock-time-zone,
		.clock-disabled {
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: $line-height;
		}

		.clock-time-zone {
			span:first-of-type {
				margin-right: 0.2em;
			}

			&.separated {
				text-align: center;

				span {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-right: 0;
				}
			}
		}

		.bold {
			font-weight: bold;
		}

		.clock-disabled {
			color: $font-alt-color;
			font-weight: bold;
		}
	}
}
